<template>
    <div style="height: 500px;">
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="单号">
                    <el-input v-model="formInline.number" placeholder="请输入单据编号" clearable />
                </el-form-item>
                <el-form-item label="客户：">
                        <el-select v-model="formInline.supName" clearable style="width: 310px; margin-left: 10px;"
                          placeholder="请选择客户">
                          <el-option v-for="customer in customers" :key="customer.id" :label="customer.supName"
                            :value="customer.supName" />
                        </el-select>
  
  
                      </el-form-item>
                <el-form-item label="单据日期">
                    <el-date-picker v-model="formInline.date" type="date" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadMenus">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="page.records" border style="width: 1180px">
                <el-table-column prop="id" label="#" width="50" />
                <el-table-column prop="erpSupplier.supNames" label="客户" width="140" />
                <el-table-column prop="number" label="单据编号" width="170" />
                <el-table-column prop="erpDepotItemList[0].erpMaterial.material_name" label="商品信息" width="320" />
                <el-table-column prop="createTime" label="单据日期" width="170" />
                <el-table-column prop="erpUser.username" label="操作员" width="84" />
                <el-table-column prop="totalPrice" label="金额合计" width="82" />
                <el-table-column label="状态" width="82" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" type="danger" effect="light">
                            未审核
                        </el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="success" effect="light">
                            已审核
                        </el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="warning" effect="light">
                            完成销售
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination 
            v-model:page-size="page.size" 
            v-model:current-page="page.current" 
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange" 
            :page-sizes="[2, 4, 8, 10]" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" 
            background 
            style="margin-top:20px;">
        </el-pagination>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import request from '@/api/request';
  import { ElMessage } from 'element-plus';
  
  const loading = ref(false);
  const page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
  });
  const formInline = reactive({
      number: '',
      supName: '',
      date: ''
  });
  const customers = ref([]); // 存储客户数据
  
  const loadCustomers = () => {
    request({
      url: '/basic/vendor/list',
      method: 'get'
    }).then(res => {
  
      customers.value = res.data; // 更新客户数据
    }).catch(err => {
      console.error(err);
    });
  };
  
  const loadMenus = () => {
    loading.value = true;
    request({
      url: '/sale/findByPage',
      method: 'get',
      params: {
        current: page.value.current,
        size: page.value.size,
        number: formInline.number,
        supName: formInline.supName, 
        date: formInline.date 
      }
    }).then(res => {
      page.value.records = res.data.records;
      page.value.total = res.data.total;
    }).catch(err => {
      ElMessage.error('加载失败');
      console.error(err);
    }).finally(() => {
      loading.value = false;
    });
  };
  
  const onReset = () => {
    formInline.number = ''; // 清空单号
    formInline.supName = ''; // 重置客户选择
    formInline.date = ''; // 清空日期
    loadMenus();
  };
  
  
  
  
  const handleCurrentChange = (val) => {
    page.value.current = val;
    loadMenus();
  };
  
  const handleSizeChange = (val) => {
    page.value.size = val;
    page.value.current = 1;
    loadMenus();
  };
  
  
  
  onMounted(() => {
    loadCustomers();
    loadMenus();
  });
  </script>
  
  <style>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  </style>
  